<template>
	<view :class="[showHurryUpPop?'login-container-1':'login-container']">
		<!-- 全屏幕 遮罩 -->
		<cover-view class="mask" v-if="showHurryUpPop" id="mask"></cover-view>
		<!-- 关于cookie的弹框 -->
		<view v-if="showCookiePop" class="show-cookie-pop">
			<view class="cookies-text">
				This site uses cookies, <br>
				is that a problem for you?
			</view>
			<view class="cookies-btns">
				<button @touchstart="noProblem">Not really, no</button>
				<button></button>
			</view>
		</view>
		<!-- cookie中的按钮禁用会失败，所以在外面做了一个，用css调进去 -->
		<button v-if="showCookiePop" class="replace-btn" :disabled="btnDisabled" @click="hasProblem">{{ btnText }}</button>
		<!-- 关于Hurry up 的弹框 -->
		<view :class="[popFullScreen?'hurry-up-full':'hurry-up']" v-if="showHurryUpPop">
			<image v-if="!popFullScreen" src="../../static/img/max-icon.png" class="max-icon" @click="popFullScreen = true"></image>
			<image v-else src="../../static/img/min-icon.png" class="max-icon" @click="popFullScreen = false"></image>
			<view class="line1">
				Hurry up, time is ticking!
			</view>
			<view class="line2">
				<text class="hour">{{hour}}</text>:
				<text class="minute">{{minute}}</text>:
				<text class="second">{{second}}</text>
			</view>
			<view :class="[isLockBtnRed?'lock-btn-red':'lock-btn']" @click="lockBtnChange">
				{{ lockBtnText }}
			</view>
			<view class="close2020" v-if="!isLockBtnRed">
				<text @click="showHurryUpPop = false" style="padding-right: 5rpx;">©lose</text> 2020
			</view>
		</view>
		<!-- 页面正文部分正式开始 -->
		<!-- logo -->
		<image class="logo" src="http://129.211.122.30:8080/v1/userinyerface/logo"></image>
		<!-- 计时器 -->
		<view class="timmer">
			<text class="hour">{{hour}}</text>:
			<text class="minute">{{minute}}</text>:
			<text class="second">{{second}}</text>
		</view>
		<!-- 4个不断变化的元元素 -->
		<view class="four-ele">
			<view class="item" :class="[index === tempIndex / 4 ? 'item-style2': 'item-style1']" v-for="(item, index) in [1,2,3,4]"
			 :key="index">
				{{ item }}
			</view>
		</view>
		<!-- 注册窗口 -->
		<view class="login-form">
			<view class="line1">
				1 / 4
			</view>
			<input class="line2" v-model="password" placeholder="Choose Password">

			</input>
			<view class="line3">
				<input class="line3-1" v-model="email" placeholder="Your email"></input>
				<view class="line3-1">
					@
				</view>
				<input class="line3-1" v-model="domain" placeholder="Domain"></input>
				<!-- 下拉框 -->
				<view class="line3-1" @click="showOptions = !showOptions">
					{{ com }}
					<image src="../../static/img/down-icon.png" class="down-icon"></image>
					<view class="options" v-if="showOptions">
						<view v-for="(item, index) in options" :key="index" @click="itemClick(item, index)" :class="[itemIndex === index? 'item-1': 'item']">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
			<view class="line4">
				<text :class="[isNotAccept?'check-box':'check-box-1']" @click="isNotAccept = !isNotAccept"></text>
				I do not accept the
				<text class="underline">Terms & Conditions</text>
			</view>
			<view class="line5">
				<view class="line5-1" @touchstart="regist">
					Next
				</view>
				<view class="line5-2">
					Cancel
				</view>
				<view class="line5-1" @click="resetFormData">
					Reset
				</view>
			</view>
		</view>
		<!-- 注册信息规则 -->
		<view class="register-rules">
			<view class="item" v-for="(item, index) in registerRules" :key="index">
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		timeSetter
	} from '../../public/js/timeSetter.js'

	export default {
		data() {
			return {
				// 是否展示cookie
				showCookiePop: false,
				// 页面show钩子中的计时器
				loginTimmer: null,
				// cookie窗口中btn2的文字
				btnText: 'Yes',
				// cookie窗口中btn2是否可用
				btnDisabled: false,
				// 页面显示的计时器的 时 分 秒
				hour: '00',
				minute: '00',
				second: '00',
				// 用户总时长，先从本地取
				totalSeconds: wx.getStorageSync('totalSeconds') || 0,
				// 用于四个圈圈背景切换的变量
				tempIndex: 0,
				// 是否展示 hurry up 弹框
				showHurryUpPop: false,
				// hurry up 按钮 的 文字 和 变红
				lockBtnText: 'Lock',
				isLockBtnRed: false,
				// hurry up 弹框 充满屏幕
				popFullScreen: false,
				// 选择接受用户协议 的 单选框
				isNotAccept: true,
				// 注册窗口的默认数据
				password: 'Choose Password',
				email: 'Your email',
				domain: 'Domain',
				com: '.other',
				// 下拉框的数据源
				options: ['.org', '.co.uk', '.net', '.gov', '.fr', '.de', '.nl', '.com', '.be', '.jpg', '.other'],
				// 下拉框item点击对应的参数
				showOptions: false,
				itemIndex: '',
				// 注册信息规则
				registerRules: ['Your password requires at least 10 characters.',
					'Your password should have at least 1 Capital letter.', 'Your password must have at least 1 Numeral.',
					'Your password needs at least 1 letter of your email.'
				],
			}
		},
		methods: {
			// cookie没有带来麻烦
			noProblem() {
				clearTimeout(this.loginTimmer)
				this.showCookiePop = false
			},
			// cookie带来麻烦
			hasProblem() {
				clearTimeout(this.loginTimmer)
				this.btnText = 'Feedback'
				this.btnDisabled = true
			},
			// hurry up 中 按钮的改变
			lockBtnChange() {
				this.isLockBtnRed = !this.isLockBtnRed
				this.lockBtnText = this.isLockBtnRed ? 'Unlock' : 'Lock'
			},
			// reset 注册框 数据
			resetFormData() {
				this.password = 'Choose Password'
				this.email = 'Your email'
				this.domain = 'Domain'
				this.com = '.other'
			},
			// 下拉框点击
			itemClick(item, index) {
				this.com = item,
					this.itemIndex = index
				this.showOptions = false
			},
			// 用户注册
			regist() {
				// 去除掉字符串所有空格
				let $password = this.password.replace(/\s+/g,"")
				// 密码的长度不小于10
				let flag1 = $password.length > 9 ? true : false
				// 密码必须有一个大写字母
				let flag2 = /[A-Z]/g.test($password) ? true : false
				// 密码必须有一个数字
				let flag4 = /[0-9]/g.test($password) ? true : false
				// 密码至少包含一个邮箱的字符
				let flag3 = false
				$password.split('').forEach(item => {
					if (this.email.indexOf(item) !== -1) {
						flag3 = true
					}
				})
				// 密码规则校验通过，则跳转到下一页
				if (flag1 && flag2 && flag3 && flag4) {
					// ...
				} 
			}
		},
		onShow() {
			// 页面加载2秒后显示cookie弹框
			this.loginTimmer = setTimeout(() => {
				this.showCookiePop = true
			}, 2000)
			// 定时器：用户总时长 自增
			setInterval(() => {
				// 总时长 自增
				this.totalSeconds = this.totalSeconds * 1 + 1
				// 自增后的总时长 写入本地
				wx.setStorageSync({
					key: 'totalSeconds',
					data: this.totalSeconds
				})
				// 将处理后的时分秒显示到视图层
				let res = timeSetter(this.totalSeconds)
				this.hour = res.hour < 10 ? '0' + res.hour : '' + res.hour
				this.minute = res.minute < 10 ? '0' + res.minute : '' + res.minute
				this.second = res.second < 10 ? '0' + res.second : '' + res.second
				// 用于四个圈圈背景切换的变量
				this.tempIndex = this.tempIndex === 12 ? 0 : this.tempIndex + 4
				// 0-59秒内随机弹框
				if (parseInt(this.totalSeconds) !== 0 && parseInt(this.totalSeconds) % 60 === Math.floor(Math.random() * 60)) {
					this.showHurryUpPop = true
					this.popFullScreen = false
				}
			}, 1000)

		}
	}
</script>

<style lang="less">
	.mask {
		position: absolute;
		z-index: 8;
		top: 0;
		// bottom: 0;
		// left: 0;
		// right: 0;
		// margin: auto;
		width: 750rpx;
		height: 2000rpx;
		background: rgba(0, 0, 0, 0.6);
	}

	.login-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: auto;
		background-color: #0c58da;
	}

	.login-container-1 {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		background-color: #0c58da;
	}

	.login-container-200 {
		position: absolute;
		top: 200rpx;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: auto;
		background-color: #0c58da;
	}

	// cookie 弹框
	.show-cookie-pop {
		height: 200rpx;
		display: flex;
		align-items: center;
		background-color: #ff0000;

		.cookies-text {
			padding: 40rpx 0 0 10rpx;
			box-sizing: border-box;
			height: 200rpx;
			width: 440rpx;
			line-height: 60rpx;
		}

		.cookies-btns {
			position: relative;
			top: -50rpx;
			width: 300rpx;
			height: 80rpx;

			button:nth-child(1) {
				background-color: #ff0000;
				color: #fff;
			}

			button:nth-child(2) {
				background-color: #ff0000;
			}

			.btn2-disabled {
				position: relative;
				z-index: 22;
				color: #acacc4;
			}

			.btn2-disabled::after {
				position: relative;
				z-index: 1;
				background-color: #f7f7f7;
				color: #acacc4;
			}
		}

	}

	// hurry up 弹框
	.hurry-up {
		position: absolute;
		top: 500rpx;
		left: 50rpx;
		z-index: 9;
		border-radius: 10px;
		width: 650rpx;
		height: 450rpx;
		background-color: #ffffff;

		.max-icon {
			float: right;
			margin: 20rpx 10rpx 0 0;
			width: 20px;
			height: 20px;
		}

		view {
			width: 100%;
			height: 100rpx;
			text-align: center;
		}

		.line1 {
			margin: 80rpx 0 0;
			font-size: 40rpx;
			font-weight: 700;
		}

		.line2 {
			font-size: 50rpx;
			font-weight: 700;
			color: #ff0000;
		}

		.lock-btn {
			margin: 20rpx auto 0;
			border-radius: 3px;
			width: 220rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			background-color: #29c566;
			color: #fff;
		}

		.lock-btn-red {
			margin: 20rpx auto 0;
			border-radius: 3px;
			width: 220rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			background-color: #ff0000;
			color: #fff;
		}

		.close2020 {
			position: absolute;
			bottom: 5px;
			left: 8px;
			width: 150rpx;
			height: 30rpx;
			font-size: 12px;
			color: #b5bbc0;
		}
	}

	// 充满屏幕的 hurry up 弹框
	.hurry-up-full {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 9;
		background-color: #ffffff;

		.max-icon {
			float: right;
			margin: 20rpx 10rpx 0 0;
			width: 25rpx;
			height: 25rpx;
		}

		view {
			width: 100%;
			height: 100rpx;
			text-align: center;
		}

		.line1 {
			margin: 80rpx 0 0;
			font-size: 40rpx;
			font-weight: 700;
		}

		.line2 {
			font-size: 50rpx;
			font-weight: 700;
			color: #ff0000;
		}

		.lock-btn {
			margin: 20rpx auto 0;
			border-radius: 3px;
			width: 220rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			background-color: #29c566;
			color: #fff;
		}

		.lock-btn-red {
			margin: 20rpx auto 0;
			border-radius: 3px;
			width: 220rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			background-color: #ff0000;
			color: #fff;
		}

		.close2020 {
			position: absolute;
			bottom: 5px;
			left: 8px;
			width: 150rpx;
			height: 30rpx;
			font-size: 12px;
			color: #b5bbc0;
		}
	}

	// logo
	.logo {
		display: block;
		margin: 100rpx auto 30rpx;
		width: 600rpx;
		height: 350rpx;
	}

	// timmer
	.timmer {
		// background-color: yellow;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 60rpx;
		color: #fff;
	}

	// four-ele
	.four-ele {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		height: 100rpx;
		width: 100%;

		.item {
			margin: 0 20rpx;
			border-radius: 50%;
			height: 100rpx;
			width: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 55rpx;
		}

		.item-style1 {
			background-color: #29c566;
			color: #fff;
		}

		.item-style2 {
			background-color: #fff;
			color: #29c566;
		}
	}

	// 注册窗口
	.login-form {
		position: relative;
		z-index: 3;
		margin: 100rpx auto;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		border-radius: 10px;
		width: 650rpx;
		height: 500rpx;
		background-color: #fff;

		&::before {
			content: '';
			position: absolute;
			z-index: -20;
			top: 10rpx;
			left: 10rpx;
			border-radius: 10px;
			width: 650rpx;
			height: 500rpx;
			background: rgba(255, 255, 255, .45);
		}

		&::after {
			content: '';
			position: absolute;
			z-index: -30;
			top: 20rpx;
			left: 20rpx;
			border-radius: 10px;
			width: 650rpx;
			height: 500rpx;
			background: rgba(255, 255, 255, .27);
		}

		>view {
			width: 100%;
		}

		.line1 {
			text-align: center;
		}

		.line2 {
			margin: 20rpx auto;
			height: 60rpx;
			width: 600rpx;
			padding-left: 15rpx;
			box-sizing: border-box;
			border: 1px solid #b5bbc0;
			border-radius: 3px;
			line-height: 30rpx;
			font-size: 26rpx;
			color: #808080;
		}

		.line3 {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 60rpx;

			.line3-1 {
				position: relative;
				margin: 0 5rpx;
				height: 60rpx;
				padding-left: 15rpx;
				box-sizing: border-box;
				border: 1px solid #b5bbc0;
				border-radius: 3px;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #808080;

				&:nth-child(1) {
					width: 250rpx;
				}

				&:nth-child(2) {
					margin: 0;
					padding: 15rpx;
					box-sizing: border-box;
					border: 0;
					line-height: 30rpx;
					color: black;
				}

				&:nth-child(3) {
					width: 200rpx;
				}

				&:nth-child(4) {
					color: black;
					width: 150rpx;
				}

				.down-icon {
					position: absolute;
					top: 18rpx;
					right: 8rpx;
					width: 25rpx;
					height: 25rpx;
				}

				.options {
					position: absolute;
					left: -2rpx;
					bottom: -250rpx;
					overflow: auto;
					width: 132rpx;
					height: 250rpx;
					border: 1px solid #b5bbc0;
					background-color: #fff;

					.item {
						width: 131rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 26rpx;
					}

					.item-1 {
						width: 131rpx;
						height: 60rpx;
						background-color: #b5bbc0;
						line-height: 60rpx;
						text-align: center;
						font-size: 26rpx;
					}
				}
			}
		}

		.line4 {
			padding: 80rpx 0;
			font-size: 26rpx;
			text-align: center;

			.check-box {
				margin-right: 25rpx;
				display: inline-block;
				border-radius: 8rpx;
				width: 30rpx;
				height: 30rpx;
				border: 1px solid black;
				color: #fff;
				background-color: #3498db;
				font-weight: 700;
				text-align: center;
				line-height: 30rpx;
			}

			.check-box-1 {
				margin-right: 25rpx;
				display: inline-block;
				border-radius: 8rpx;
				width: 30rpx;
				height: 30rpx;
				border: 1px solid black;
				color: #fff;
				background-color: #fff;
				font-weight: 700;
				text-align: center;
				line-height: 30rpx;
			}

			.underline {
				margin-left: 5rpx;
				border-bottom: 1px solid black;
			}
		}

		.line5 {
			display: flex;
			align-items: center;
			justify-content: center;

			.line5-1 {
				flex: 1;
				color: #b5bbc0;
				text-align: center;
				font-size: 26rpx;
			}

			.line5-2 {
				border-radius: 10rpx;
				height: 60rpx;
				width: 300rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #0c58da;
				color: #fff;
				font-size: 24rpx;
			}
		}
	}

	// 注册信息规则
	.register-rules {
		margin-bottom: 100rpx;
		width: 100%;
		text-align: center;

		.item {
			width: 100%;
			height: 40rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #29c566;
		}
	}

	.hide-cookie-pop {
		display: none;
	}

	.replace-btn {
		position: absolute;
		right: 10rpx;
		top: 110rpx;
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fff;
		color: #ff0000;
	}

	// 小程序中 button 的边框都是通过伪元素after来设定的，所以这里去掉该页面全局的button边框
	button::after {
		border: none;
		border-radius: 0;
	}
</style>
